/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.panel-heading-container {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: #363e45;
  padding-top: 5px;
  padding-bottom: 5px;

  .intent-buttons-container {
    display: flex;
    width: 45%;
    gap: 2%;
    justify-content: flex-end;
    padding-top: 1%;
    padding-bottom: 1%;

    .reset-button {
      background: white !important;
      box-sizing: border-box !important;
      border: 1px solid #4285F4 !important;
      color: #4285F4 !important;
      cursor: pointer;
      outline: none;
      font-family: 'Google Sans', sans-serif !important;
      font-size: 14px;
      font-weight: 500;
      margin: 0;
      min-width: 64px;
      line-height: 36px;
      padding: 0px 45px;
      height: 100%;
      border-radius: 48px !important;
      display: flex;
      justify-content: center;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
    }

    .internal-spinner-container {
      height: 31px
    }
  }
}

.input-field-container {
  display: flex;
  flex-direction: row;
  gap: 2%;
  align-items: start;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 4%;

  .checkbox-margin {
    padding-bottom: 1%;
  }

  .intent-field {
    width: 50%;

    .my-icon {
        margin-right: 0.5rem;
        color: #005cbb;
        border-radius: 2rem;
        padding: 1rem;
    }
  }

  .prompt-field {
    width: 100%;
    height: 150px;
  }

  .ai-temperature-field {
    height: 100%;
    display: flex;
    align-items: center;
    width: 50%;
    flex-direction: column;
    justify-content: center;

    .ai-temperature-label-container {
      margin-top: -15px;
      display: flex;
      width: 100%;
      justify-content: space-between;
    }
  }
}

.questions-field-container {
  height: 100%;

  .search-question-field {
    width: 100%;
    height: 100%;

    mat-icon {
        color: #363e45;
        cursor: pointer;
    }
  }
}

.add-question-button {
  padding-left: 16px;
  padding-right: 16px;
  color: #4285F4 !important;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
}

.image-container {
  justify-content: center;
  display: flex;
  width: 90%;

  img {
      height: 47%;
      width: 47%;
  }
}

.delete-confirmation-text {
  font-family: 'Google Sans', sans-serif !important;
  font-style: normal;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 20px;
  color: #161A1D;
}

.dialog-actions-container {
  padding-bottom: 2%;
  justify-content: center;
  display: flex;
  flex-direction: row;
  text-align: end;
  width: 100%;
  padding-right: 2%;

  .discard-button {
      color: rgba(92, 95, 97, 0.5);
      border: 1px solid rgb(92 95 97 / 28%);
      border-radius: 40px;
      box-shadow: none;
      letter-spacing: inherit;
  }

  .save-button {
      background: #4285F4;
      color: #fff;
      border-radius: 40px;
      box-shadow: none;
      letter-spacing: inherit;
  }

  .dialog-delete-button {
    border-radius: 30px;
    font-family: 'Google Sans', sans-serif !important;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 23px;
    letter-spacing: unset;
    box-shadow: none;
    color: #f70808;
    border: 1px solid #f70808;
}
}

::ng-deep .mat-horizontal-content-container {
  padding-top: 8% !important;
  padding: 3% !important;
  width: 85% !important;
}

.button-container {
  justify-content: end;
  display: flex;
  gap: 10px;
  margin-bottom: -30px;
  padding-top: 3%;

  .submit-button {
    width: 7%;
    background: #4285F4;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    color: #fff;
    position: relative;
    user-select: none;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    font-family: 'Google Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: baseline;
    text-align: center;
    margin: 0;
    min-width: 64px;
    padding: 0 16px;
    border-radius: 35px;
    overflow: visible;
    transform: translate3d(0, 0, 0);
    transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cancel-button {
    width: 7%;
    background: white;
    box-sizing: border-box;
    border: 1px solid #4285F4;
    color: #4285F4;
    position: relative;
    user-select: none;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    font-family: 'Google Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: baseline;
    text-align: center;
    margin: 0;
    min-width: 64px;
    padding: 0 16px;
    border-radius: 35px;
    overflow: visible;
    transform: translate3d(0, 0, 0);
    transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
}

::ng-deep .mat-step-header {
  display: grid !important;
}

::ng-deep .mat-stepper-horizontal-line {
  border-top-width: 4px !important;
  border-top-style: dotted !important;
  height: 32px !important;
}

::ng-deep .mat-horizontal-stepper-header .mat-step-icon {
  margin-left: 8px !important;
}

.slider {
  background: linear-gradient(90.18deg, rgba(66, 133, 244, 0.8075) 7.88%, rgba(112, 81, 202, 0.85) 83.78%, rgba(188, 18, 4, 0.748) 152.54%);
  border-radius: 40px;
}

// ::ng-deep .mat-mdc-slider {
//   -webkit-tap-highlight-color: rgb(255 251 255);
//   background: 
//   border-radius: 40px;
// }


::ng-deep .mat-mdc-slider .mdc-slider__thumb-knob {
  border-color: aliceblue !important;
}

::ng-deep .mat-mdc-slider .mdc-slider__track--inactive {
  background-color: #a4ccef !important;
  opacity: 1 !important; 
}

::ng-deep .mat-mdc-slider .mdc-slider__track--active_fill {
  border-color: linear-gradient(90.18deg, rgba(66, 133, 244, 0.8075) 7.88%, rgba(112, 81, 202, 0.85) 83.78%, rgba(188, 18, 4, 0.748) 152.54%) !important;
}

::ng-deep .mat-horizontal-stepper-header-container {
  width: 75% !important;
  padding-bottom: 4% !important;
}

::ng-deep .mat-horizontal-stepper-wrapper  {
  align-items: center !important;
}

::ng-deep .mat-expansion-panel {
  box-shadow: none !important;
}

.configure-title {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  margin-top: -26px;
  padding-bottom: 5%;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
  color: #161A1D;

  .inactive-button {
    background: rgb(249 249 225) !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 119, 7, 0.5019607843) !important;
    color: rgb(255 119 7 / 93%) !important;
    cursor: pointer;
    outline: none;
    font-family: "Google Sans", sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    min-width: 64px;
    line-height: 36px;
    padding: 0px 45px;
    height: 60%;
    margin-left: 2rem;
    border-radius: 48px !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
  }

  .active-button {
    background: rgb(226 249 225) !important;
    box-sizing: border-box !important;
    border: 1px solid rgb(59 153 29 / 84%) !important;
    color: rgb(17 193 56 / 93%) !important;
    cursor: pointer;
    outline: none;
    font-family: "Google Sans", sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    min-width: 64px;
    line-height: 36px;
    padding: 0px 45px;
    height: 60%;
    margin-left: 2rem;
    border-radius: 48px !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
  }
}

.question-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: start;
  max-height: 220px;
  overflow-y: auto;
}

::ng-deep .mat-step-header .mat-step-icon-state-edit {
  background-color: #4285f4 !important;
}

::ng-deep .mat-step-header .mat-step-icon-selected {
  background-color: #4285f4 !important;
}